﻿@model List<PinBoardDashBoardModel>
@{
    Layout = null;
}

<!-- BEGIN PAGE CONTENT-->
<div class="row tahomaFont">
    <div class="col-md-12">
        <ul class="timeline tahomaFont">
            @{

                var colors = new Dictionary<int, string>();
                colors.Add(1, "yellow");
                colors.Add(2, "green");
                colors.Add(3, "purple");
                colors.Add(4, "grey");
                
                for (int i = 0; i < this.Model.Count(); i++)
                {
                    var item = this.Model[i];
                    var index = new Random(i).Next(1, 4);
                    <li class="timeline-@colors[index]">
                        <h1>@(item.Categories.Count() > 0 ? item.Categories.First().Title : "12")</h1>
                        <div class="timeline-time">
                            <span class="date">
                                @item.Date.ToShortDateString()
                            </span>
                            <span class="time">
                                @item.Date.Hour:@item.Date.Second
                            </span>
                        </div>
                        <div class="timeline-icon">
                            <i class="fa fa-apple"></i>
                        </div>
                        <div class="timeline-body">
                            <h2 class="tahomaFont" style="font-size: 15px">@item.Title</h2>
                            <div class="timeline-content">
                                <img class="timeline-img pull-left" src="/Content/assets/img/blog/2.jpg" alt="">
                                @item.Description
                            </div>
                            <div class="timeline-footer">
                                <a href="#" class="nav-link pull-right" data-toggle="modal" data-remote="/PinBoard/Edit?id=@item.Id" data-target="#wide">
                                    ویرایش <i class="m-icon-swapright m-icon-white"></i>
                                </a>
                            </div>
                        </div>
                    </li>
                }
            }
        </ul>
    </div>
</div>

<div class="modal fade" id="wide" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-content"></div>
</div>


<!-- END PAGE CONTENT-->